<script setup>
// #region 引入包, 函数和组件
import { ref, watch, useTemplateRef, nextTick } from "vue";
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const props = defineProps(["cinemas"]);
const curCinemas = defineModel("curCinemas");
const hidden = defineModel("hidden");
// #endregion

// #region // 变量
const clickIndex = ref(-1); // 点击tabs的下标
const filterCinemasList = ref(null);
const areaId = ref(0); // 当前地区id
const posSort = ref(0); // 去过还是最近
// #endregion

// #region // 函数
const onClickDistrict = (id) => {
  areaId.value = id;
  clickIndex.value = -1;
};
const onClickRecent = () => {
  posSort.value = posSort.value === 0 ? 1 : 0;
  clickIndex.value = -1;
  // console.log(posSort.value)
};
// #endregion

// #region // 生命周期和vue函数
watch(
  () => props.cinemas,
  () => {
    if (!props.cinemas) return;
    filterCinemasList.value = props.cinemas.reduce((res, item) => {
      const index = res.findIndex((v) => v.type === item.districtName); // districtId
      if (index === -1) {
        res.push({
          type: item.districtName,
          id: item.districtId,
          children: [item],
        });
      } else {
        res[index].children.push(item);
      }
      // console.log(res)
      return res;
    }, []);
    filterCinemasList.value.unshift({
      type: "全部",
      id: 0,
      children: [...props.cinemas],
    });
    watch(
      [areaId, posSort],
      () => {
        if (!filterCinemasList.value) return;
        // console.log(filterCinemasList.value)
        let sortList = [...filterCinemasList.value];
        if (posSort.value) {
          sortList = [...filterCinemasList.value];
        } else {
          sortList.forEach((v) => {
            v.children.sort((a, b) => a.Distance - b.Distance);
            // console.log(111)
          });
        }
        curCinemas.value = sortList.find((v) => v.id === areaId.value);
        // console.log(curCinemas.value)
      },
      { immediate: true }
    );
  }
);
watch(clickIndex, () => {
  hidden.value = clickIndex.value !== -1;
});

// #endregion
</script>

<template>
  <div class="filter_wrap">
    <div class="tabs">
      <span :class="{ activeCl: clickIndex === 0 }" @click="clickIndex = clickIndex === 0 ? -1 : 0 "
        >{{ curCinemas?.type }} <i>&lt;</i></span
      >
      <span :class="{ activeCl: clickIndex === 1 }" @click="clickIndex = clickIndex === 1 ? -1 : 1"
        >{{ posSort ? "最近去过" : "离我最近" }} <i>&lt;</i></span
      >
    </div>
    <div class="pop" @click="clickIndex = -1" v-show="clickIndex + 1"></div>
    <div :class="['district', 'div', { hidden: clickIndex !== 0 }]">
      <p
        :class="{ activeBdc: areaId === item.id, activeCl: areaId === item.id }"
        @click="onClickDistrict(item.id)"
        v-for="item in filterCinemasList"
        :key="item.id"
      >
        {{ item.type }}
      </p>
    </div>
    <div :class="['recentlyVisited', 'div', { hidden: clickIndex !== 1 }]">
      <p :class="{ activeCl: posSort === 0 }" @click="onClickRecent">离我最近</p>
      <p :class="{ activeCl: posSort === 1 }" @click="onClickRecent">最近去过</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.filter_wrap {
  width: 100%;
  height: 100%;
  // height: 0.5rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.tabs {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 11;
  background: #fff;
  height: 100%;
  border-bottom: 0.01rem solid #f3f4f6;
  span {
    flex: 1;
    display: flex;
    justify-content: center;
    font-size: 0.14rem;
    color: var(--cl-blk);
    height: 100%;
    line-height: 0.49rem;
    cursor: pointer;
    i {
      font-size: 0.1rem;
      transform: rotate(-90deg) scale(0.8, 1.4);
      margin-left: 0.05rem;
      transition: transform 0.2s ease;
    }
  }
}

.pop {
  height: calc(100vh - 0.44rem);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba($color: #000000, $alpha: 0.5);
}

.div {
  background: #fff;
  transition: transform 0.2s ease-out;
  // height: 0;
  overflow: hidden;
  padding-top: 0.1rem;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9;
  p {
    cursor: pointer;
  }
}

.district {
  flex-wrap: wrap;
  padding-left: 0.1rem;
  align-content: start;
  p {
    width: 0.8125rem;
    height: 0.3rem;
    border: 0.01rem solid #f2f3f5;
    margin: 0 0.1rem 0.15rem 0;
    text-align: center;
    line-height: 0.28rem;
    font-size: 0.12rem;
    color: var(--cl-wh);
    border-radius: 0.04rem;
  }
}

.recentlyVisited {
  flex-direction: column;
  width: 100%;
  padding: 0;
  p {
    height: 0.44rem;
    border-bottom: 0.01rem solid #f8f8f8;
    line-height: 0.43rem;
    font-size: 0.13rem;
    color: var(--cl-wh);
    padding-left: 0.2rem;
    width: 100%;
  }
}

.hidden {
  transform: translateY(calc(-100% - 0.01rem));
}
.activeBdc {
  border-color: #f8a077 !important;
}
.activeCl {
  color: #ff5f16 !important;
  i {
    transform: rotate(90deg) scale(0.8, 1.4) !important;
  }
}
</style>
